<template>
	<div class="tab_dbox">
		
		<div style="height: 64px;"></div>
		<div class="tab_btmnav">
			<TabbarItem v-for="(item,index) in tabbarItem"
				:item="item"
				:index="index"
				:selectIndex="selectIndex"
				@changeIndex="changeIndex"
				>
			</TabbarItem>
		</div>
		
	</div>
</template>

<script>
	import TabbarItem from './Tabbaritem';
	export default{
		components:{
			TabbarItem
		},
		props:{
			items:{
				type:Array,
				required:true,
				validator:function(value){
					return value.length <= 6
				}
			},
			defaultSelectIndex:{
				type:Number,
				default:0
			}
		},
		data(){
			return{
				tabbarItem:this.items,
				selectIndex:this.defaultSelectIndex
			}
		},
		methods:{
			changeIndex(index){
				this.selectIndex = index
			}
		}
	}
</script>

<style scoped="scoped">
	.tab_btmnav{
		width: 100%;
		/* height: 64px; */
		height: 10vh;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid lightgray;
		text-align: center;
		font-size: 14px;
		background-color: white;
	}
</style>
